<style>
  body {
    background-color: #333;
  }
  .box {
    width: 640px;
    padding: 20px 0;
    margin: auto;
    border-radius: 20px;
    background-color: #ea282a;
  }
  .box .content {
    width: 600px;
    margin: auto;
    background-color: #A40014;
    border-radius: 20px;
  }
  .box .content:after {
    content: '';
    clear: both;
    display: block;
  }
  .prize-box {
    width: 200px;
    height: 200px;
    float: left;
  }
  .prize-box .body {
    width: 180px;
    height: 180px;
    margin: 10px auto;
    border-radius: 15px;
    background-color: #fceded;
    text-align: center;
    font-size: 30px;
    color: #666;
    font-weight: 600;
  }

  .prize-box .body .name {
    padding-top: 40px;
    line-height: 40px;
  }

  .prize-box .body .prize {
    line-height: 40px;
    color: #e00014;
  }

  .prize-box .light {
    background-color: #ffe56c !important;
  }
  .prize-box .button {
    background-color: #ffe56c;
    color: #e00014;
    font-weight: 900;
    font-size: 60px;
  }
</style>

<template>
  <div>
    <div class="box">
      <div class="content">
        <div class="prize-box">
          <div class="body" :class="{light: light === 0}">
            <div v-if="users[0]" class="name">
              {{ users[0].name }}
            </div>
            <div v-if="users[0].prize" class="prize">
              {{ this.prizeInfo[users[0].prize].name }}
            </div>
          </div>
        </div>
        <div class="prize-box">
          <div class="body" :class="{light: light === 1}">
            <div v-if="users[1]" class="name">
              {{ users[1].name }}
            </div>
            <div v-if="users[1].prize" class="prize">
              {{ this.prizeInfo[users[1].prize].name }}
            </div>
          </div>
        </div>
        <div class="prize-box">
          <div class="body" :class="{light: light === 2}">
            <div v-if="users[2]" class="name">
              {{ users[2].name }}
            </div>
            <div v-if="users[2].prize" class="prize">
              {{ this.prizeInfo[users[2].prize].name }}
            </div>
          </div>
        </div>
        <div class="prize-box">
          <div class="body" :class="{light: light === 7}">
            <div v-if="users[7]" class="name">
              {{ users[7].name }}
            </div>
            <div v-if="users[7].prize" class="prize">
              {{ this.prizeInfo[users[7].prize].name }}
            </div>
          </div>
        </div>
        <div class="prize-box">
          <div class="body button" @click="start">
            立即
            抽奖
          </div>
        </div>
        <div class="prize-box">
          <div class="body" :class="{light: light === 3}">
            <div v-if="users[3]" class="name">
              {{ users[3].name }}
            </div>
            <div v-if="users[3].prize" class="prize">
              {{ this.prizeInfo[users[3].prize].name }}
            </div>
          </div>
        </div>
        <div class="prize-box">
          <div class="body" :class="{light: light === 6}">
            <div v-if="users[6]" class="name">
              {{ users[6].name }}
            </div>
            <div v-if="users[6].prize" class="prize">
              {{ this.prizeInfo[users[6].prize].name }}
            </div>
          </div>
        </div>
        <div class="prize-box">
          <div class="body" :class="{light: light === 5}">
            <div v-if="users[5]" class="name">
              {{ users[5].name }}
            </div>
            <div v-if="users[5].prize" class="prize">
              {{ this.prizeInfo[users[5].prize].name }}
            </div>
          </div>
        </div>
        <div class="prize-box">
          <div class="body" :class="{light: light === 4}">
            <div v-if="users[4]" class="name">
              {{ users[4].name }}
            </div>
            <div v-if="users[4].prize" class="prize">
              {{ this.prizeInfo[users[4].prize].name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      users: [
        {
          name: '徐欣然',
          prize: null
        },
        {
          name: '杨凯',
          prize: null
        },
        {
          name: '占恒',
          prize: null
        },
        {
          name: '筑梦港',
          prize: null
        },
        {
          name: '蒙灏',
          prize: null
        },
        {
          name: '许铁成',
          prize: null
        },
        {
          name: '沈佳丽',
          prize: null
        },
        {
          name: '田真理',
          prize: null
        },
      ],
      prizes: [
        'third', 'third','third','third','third',
        'second', 'second',
        'first',
      ],
      prizeInfo: {
        first: {
          name: '一等奖'
        },
        second: {
          name: '二等奖',
        },
        third: {
          name: '三等奖'
        }
      },
      speeds: [

      ],
      started: false,
      light: false,
    }
  },
  methods: {
    start () {
      let $this = this;
      if (this.started || !this.prizes.length > 0) {
        return;
      }
      this.started = true;
      this.light = this.random(0, this.users.length);

      let length = 0;
      for (let index in this.users) {
        if (this.users[index].prize === null) {
          length ++;
        }
      }

      Vue.set(this, 'speeds', [
        this.random(1, length), this.random(1, length), this.random(1, length * 2), this.random(length * 2 + 1, length * 5),
        this.random(length + 1, length * 2), this.random(1, length), this.random(1, length)
      ])

      this.prize();
    },
    prize () {
      let $this = this;
      if (!this.started || this.light === false) {
        return;
      }

      for (var index in this.speeds) {
        if (this.speeds[index] > 0) {
          let timeout = 0;
          switch (index) {
            case '0':
            case 0: {
              timeout = 500;
              break;
            }
            case '1':
            case 1: {
              timeout = 350;
              break;
            }
            case '2':
            case 2: {
              timeout = 200;
              break;
            }
            case '3':
            case 3: {
              timeout = 100;
              break;
            }
            case '4':
            case 4: {
              timeout = 200;
              break;
            }
            case '5':
            case 5: {
              timeout = 350
              break;
            }
            default: {
              timeout = 500;
              break;
            }
          }
          console.log(timeout);
          setTimeout(function () {
            $this.light = $this.light + 1;
            if ($this.light > ($this.users.length - 1)) {
              $this.light = 0;
            }
            if ($this.users[$this.light].prize === null) {
              $this.speeds[index] = $this.speeds[index] - 1;
            }
            $this.prize();
          }, timeout);
          return;
        }
      }
      this.users[this.light].prize = this.prizes.shift();

      this.started = false;
    },
    random (min, max) {
      let num = Math.random();
      num = parseInt(num * 1000);
      const subtraction = max - min;
      num = num % subtraction;
      return min + num;
    }
  }
}
</script>
